<template>
  <!-- 写评论页面 -->
  <view class="main">
    <view class="textarea">
      <textarea v-model="text" placeholder="写评论" />
    </view>

    <view class="imgs">
      <view class="img" v-for="(item, index) in imgs" :key="index">
        <image
          :src="item"
          mode="aspectFill"
          class="image"
          @click="imgsDa(index)"
        ></image>
        <image
          src="../../imges/shanchu1.png"
          mode="aspectFill"
          class="shan"
          @click="imgsShan(index)"
        ></image>
      </view>
      <view class="push_img" @tap="selctPhone">+</view>
    </view>
    <view class="btn" @tap="xiepinlun">发布</view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      imgs: [], //照片数组
      id: "",
      text: "",
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      fileUrl: [],
      num: 0,
      isShare: "",
    };
  },
  onLoad(option) {
    this.id = option.id;
    this.isShare = option.isShare;
    request({
      url: "webSite/home/uploadApplication",
      method: "post",
      header: {
        "content-type": "application/json;charset=UTF-8",
        "api-client": "72e0fee8172411ea995200163e05ff66",
        "api-version": "1.3.3",
        "Source-Type": 7,
        // 'token': token
      },
      data: {},
    }).then((res) => {
      // console.log(res)
      this.upToken = res.data.data.upToken;
      this.qiniuyun = res.data.data.qiniuDomain;
      this.qiniuUrl = res.data.data.region;
    });
  },
  methods: {
    xiepinlun() {
      this.num++;
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (this.text == "" && this.fileUrl.length == 0) {
        uni.showToast({
          title: "请输入内容",
          duration: 2000,
          icon: "none",
        });
        return false;
      }

      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        if (this.num <= 1) {
          request({
            url:
              "app/orgMessage/saveComment?uid=63755c41127811e981b5fa163e4d6bc3",
            method: "POST",
            header: {
              "content-type": "application/json;charset=UTF-8",
              "api-client": "72e0fee8172411ea995200163e05ff66",
              "api-version": "1.3.3",
              "Source-Type": 7,
              token: token,
            },
            data: {
              messageId: this.id,
              content: this.text,
              pictureList: this.fileUrl,
            },
          }).then((res) => {
            console.log(res.data.code);
            if (res.data.code == 200) {
              uni.showToast({
                title: "发布成功",
                duration: 2000,
                icon: "none",
              });
              setTimeout(() => {
                if (that.isShare == 1) {
                  uni.navigateTo({
                    url:
                      "/pages/index/trickDetail?id=" + that.id + "&isShare=1",
                  });
                } else {
                  uni.navigateBack({
                    delta: 1,
                  });
                }
              }, 1500);
            } else {
              uni.showToast({
                title: res.data.msg,
                duration: 2000,
                icon: "none",
              });
            }
          });
        }
      }
    },
    selctPhone(e) {
      //点击上传图片
      uni.chooseImage({
        count: 6,
        success: (res) => {
          let tempFilePaths = res.tempFilePaths;
          this.imgs = [...this.imgs, ...tempFilePaths];
          uni.showToast({
            title: "上传成功",
            duration: 1500,
            icon: "none",
          });
          tempFilePaths.forEach((v, i) => {
            uni.uploadFile({
              url: "https://up-z0.qiniup.com",
              filePath: tempFilePaths[i],
              name: "file",
              formData: {
                token: this.upToken,
              },
              success: (uploadFileRes) => {
                this.fileUrl.push(
                  this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key
                );
              },
            });
          });
        },
      });
    },

    imgsDa(index) {
      //点击放大
      uni.previewImage({
        urls: this.imgs,
        current: index,
        loop: true,
      });
    },
    imgsShan(index) {
      //点击删除
      uni.showModal({
        title: "提示",
        content: "确定删除此张照片吗？",
        success: (res) => {
          if (res.confirm) {
            this.imgs.splice(index, 1);
            this.fileUrl.splice(index, 1);
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 40rpx 32rpx;
  .textarea {
    width: 100%;
    height: 220rpx;
    textarea {
      width: 100%;
      height: 100%;
    }
  }
  .imgs {
    display: flex;
    flex-wrap: wrap;
    .img {
      width: 200rpx;
      height: 200rpx;
      border-radius: 12rpx;
      margin-right: 18rpx;
      margin-bottom: 15rpx;
      position: relative;
      .image {
        width: 100%;
        height: 100%;
      }
      .shan {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        top: -10rpx;
        right: -10rpx;
      }
    }
    .push_img {
      width: 200rpx;
      height: 200rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 100rpx;
      box-sizing: border-box;
      border: 2rpx solid #ccc;
      border-radius: 5rpx;
    }
  }
  .btn {
    margin: 0 auto;
    margin-top: 55rpx;
    width: 620rpx;
    height: 74rpx;
    background: #2168eb;
    border-radius: 37rpx;
    text-align: center;
    line-height: 74rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
  }
}
</style>
